<template>
  <view class="home">
    <view class="header">
      <image :src='avatar' class="img" @click="showDrawer" />
      <view class="search" @tap="goSearch">
        <uni-icons type="search" size="20"></uni-icons>
        <text>搜索壁纸</text>
      </view>
      <view class="download">
        <image @tap="goLike" :src='like' class="like" />
        <!-- <uni-icons @tap="goLike" type="images" size="35"></uni-icons> -->
      </view>
    </view>
    <uni-drawer ref="showLeft" mode="left" :width="250" class="drawer">
      <image :src='avatar' class="img" />
      <view class="login" v-if="!userName">
        <uni-easyinput errorMessage v-model="userInfo.user" focus placeholder="请输入账号"></uni-easyinput>
        <uni-easyinput type="password" v-model="userInfo.password" placeholder="请输入密码"></uni-easyinput>
        <view class="btn">
          <button type="primary" size="mini" :disabled="disabled" @tap="login">登录</button>
          <button type="" size="mini" :disabled="disabled" @tap="register">注册</button>
        </view>
      </view>
      <view v-else class="logout">
        <view class="name"> {{ userName }}</view>
        <button type="warn" size="mini" @tap="logout">退出登录</button>
      </view>
      <view class="version">
        <view>版本号：1.0.0</view>
        <view>数据来源：https://img.moehu.org/。</view>
        <view>如有侵权，请联系QQ:3201468129删除。</view>
      </view>
    </uni-drawer>
    <myShowImg :all="true"></myShowImg>
  </view>
</template>

<script lang="ts" setup>
import avatar from "@/static/images/avatar.jpg"
import like from '@/static/images/like.png'
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive, computed, onMounted } from 'vue'
import { useLikeStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { userName, likeImgs } = storeToRefs(useLikeStore())
const likeStore = useLikeStore()
const showLeft: any = ref(null)
const userInfo = reactive({
  user: '',
  password: ''
})
const goLike = () => {
  if (userName.value) {
    likeStore.getImgs()
    uni.navigateTo({
      url: '/pages/like/like'
    })
  } else {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
  }
}
const goSearch = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}

// 打开窗口
const showDrawer = (e: any) => {
  showLeft.value.open()
}

const disabled = computed(() => {
  if (userInfo.user && userInfo.password) {
    return false
  } else {
    return true
  }
})

const login = () => {
  uniCloud.callFunction({
    name: 'user',
    data: {
      user: userInfo.user,
      password: userInfo.password
    },
    success: (res) => {
      if (res.result.data.length == 1) {
        userName.value = res.result.data[0].user
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        showLeft.value.close()
      } else {
        uni.showToast({
          title: '账号或密码错误',
          icon: 'error'
        })
      }
    }
  })
}
const register = () => {
  uniCloud.callFunction({
    name: 'register',
    data: {
      user: userInfo.user,
      password: userInfo.password
    },
    success: (res) => {
      console.log(res);
      if (res.result.code == 200) {
        uni.showToast({
          title: res.result.msg,
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: res.result.msg,
          icon: 'error'
        })
      }
    },
  })
}
const logout = () => {
  userName.value = ''
  userInfo.password = ''
  userInfo.user = ''
  likeImgs.value = []
}
onLoad(() => {
  uni.hideTabBar()

})
onMounted(() => {

})
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(100vh - var(--window-top) - var(--window-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .header {
    display: grid;
    grid-template-columns: 35px 1fr 35px;
    padding: 5px;
    gap: 10px;
    align-items: center;

    .img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }

    .search {
      background-color: #f5f5f5;
      border-radius: 20px;
      padding: 5px 10px;
      font-size: 28rpx;
      color: #999;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .like {
      width: 25px;
      height: 25px;
    }
  }

  .imgs {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5rpx;

    .list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rpx;

      .item {
        width: 100%;
        border-radius: 20rpx;
        height: 600rpx;
        overflow: hidden;


        :deep(.easy-loadimage) {
          width: 100%;
        }

        :deep(.origin-img) {
          border-radius: 20rpx;
        }

        /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
        :deep(.loadfail-img),
        :deep(.loading-img) {
          height: 600rpx;
        }
      }
    }
  }

  .drawer {
    text-align: center;

    .img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-top: 100px;
    }

    .login {
      display: grid;
      gap: 10px;
      padding: 20px;
    }

    .logout {
      display: grid;
      gap: 10px;
      padding: 20px;

      .name {
        font-weight: 18px;
        font-weight: bold;
      }
    }

    .btn {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .version {
      width: 100%;
      font-size: 10px;
      color: #808080b2;
      position: absolute;
      bottom: 10px;
    }
  }
  
}
</style>
